import { useRootStore } from "../store"
import UnCompletedTodoCount from "./UnCompletedTodoCount"
import "./style.css"
import { observer } from "mobx-react-lite";
function Footer() {
  const { todoStore } = useRootStore();
  const { changeFilterCondition, filterCondition, clearCompletedTodos } = todoStore
  return (
    <div>
        <UnCompletedTodoCount/>
        {
          ["All","active","completed"].map((item,index)=>(
              <li key={index}>
                  <button className={filterCondition==item?"button":""} onClick={()=>{changeFilterCondition(item)}}>{item}</button>
              </li>
          ))   
        }
        <div onClick={clearCompletedTodos}>clear completed</div>
    </div>
  )
}

export default observer(Footer) 